<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>培训需求</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/fonts/font-awesome.min.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">


</head>

<body>
    <!-- header -->
    <div>
        <div class="widget-default widget-body margin-b-5 padding-b-10 display-flex justify-content-between align-items-center">
            <div class="px-search mui-input-row mui-search" style="width: 88%;">
                <img src="../img/search-icon.png" alt="">
                <input class="mui-input-clear" type="text" name="" id="" placeholder="培训机构、地址">
               
            </div>
            <span class="font-16 gray">搜索</span>
        </div>

        <div class="widget-default padding-10 display-flex align-center justify-content-between margin-b-3">
            <div class="display-flex align-items-center justify-content-center width33" id="sele1">
                <span class="font-14 gray padding-r-10 elli1">全国</span>
                <span class="fa fa-angle-down gray"></span>
            </div>
            <div class="display-flex align-items-center justify-content-center width33" id="sele2">
                <span class="font-14 gray padding-r-10 elli1">全部</span>
                <span class="fa fa-angle-down gray"></span>
            </div>
            <div class="display-flex align-items-center justify-content-center width33" id="sele3">
                <span class="font-14 gray padding-r-10 elli1">默认排序</span>
                <span class="fa fa-angle-down gray"></span>
            </div>
        </div>
        <!-- 内容 -->
        <div class="margin-b-10">
            <div class="trade-list widget-body widget-default margin-b-1">
                <div class="display-flex align-items-center margin-b-10">
                    <span class="px-content font-15 tuli-bg-b elli1">水果</span>
                    <p class="black1 font-16 font-weight no-margin elli1 padding-r-10">现代农民的新工具民的新工民的新工民的新工
                    </p>
                </div>
                <img class="pxsuccess-img" src="../img/px-success.png" alt="">
                <div class="display-flex align-items-center justify-content-between padding-t-5">
                    <p class="font-12 gray no-margin">主办方：杨凌农业云</p>
                    <span class="font-16 font-weight red">￥300.00</span>
                </div>
                <div class="display-flex align-items-center justify-content-between">
                    <p class="font-12 gray no-margin">工作地址：陕西省西安市神舟数码</p>
                    <span class="font-12 gray">1人已报价</span>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="margin-b-10">
            <div class="trade-list widget-body widget-default margin-b-1">
                <div class="display-flex align-items-center margin-b-10">
                    <span class="px-content font-15 tuli-bg-b elli1">水果</span>
                    <p class="black1 font-16 font-weight no-margin elli1 padding-r-10">现代农民的新工具民的新工民的新工民的新工
                    </p>
                </div>
                <img class="pxsuccess-img" src="../img/px-fail.png" alt="">
                <div class="display-flex align-items-center justify-content-between padding-t-5">
                    <p class="font-12 gray no-margin">主办方：杨凌农业云</p>
                    <span class="font-16 font-weight red">￥300.00</span>
                </div>
                <div class="display-flex align-items-center justify-content-between">
                    <p class="font-12 gray no-margin">工作地址：陕西省西安市神舟数码</p>
                    <span class="font-12 gray">1人已报价</span>
                </div>
            </div>

        </div>
        <!--  -->
        <!--  -->
        <div class="margin-b-10">
            <div class="trade-list widget-body widget-default margin-b-1">
                <div class="display-flex align-items-center margin-b-10">
                    <span class="px-content font-15 tuli-bg-b elli1">水果</span>
                    <p class="black1 font-16 font-weight no-margin elli1 padding-r-10">现代农民的新工具民的新工民的新工民的新工
                    </p>
                </div>
                <img class="pxsuccess-img" src="../img/px-going.png" alt="">
                <div class="display-flex align-items-center justify-content-between padding-t-5">
                    <p class="font-12 gray no-margin">主办方：杨凌农业云</p>
                    <span class="font-16 font-weight red">￥300.00</span>
                </div>
                <div class="display-flex align-items-center justify-content-between">
                    <p class="font-12 gray no-margin">工作地址：陕西省西安市神舟数码</p>
                    <span class="font-12 gray">1人已报价</span>
                </div>
            </div>

        </div>
        <!--  -->
        <div class="margin-b-10">
            <div class="trade-list widget-body widget-default margin-b-1">
                <div class="display-flex align-items-center margin-b-10">
                    <span class="px-content font-15 tuli-bg-b elli1">水果</span>
                    <p class="black1 font-16 font-weight no-margin elli1 padding-r-10">现代农民的新工具民的新工民的新工民的新工
                    </p>
                </div>
                <img class="pxsuccess-img" src="../img/px-ending.png" alt="">
                <div class="display-flex align-items-center justify-content-between padding-t-5">
                    <p class="font-12 gray no-margin">主办方：杨凌农业云</p>
                    <span class="font-16 font-weight red">￥300.00</span>
                </div>
                <div class="display-flex align-items-center justify-content-between">
                    <p class="font-12 gray no-margin">工作地址：陕西省西安市神舟数码</p>
                    <span class="font-12 gray">1人已报价</span>
                </div>
            </div>

        </div>
        <!--  -->

    </div>

    <ul class="widget-default widget-body seleshow" id="seleshow1">
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
    </ul>
    <ul class="widget-default widget-body seleshow" id="seleshow2">
        <li>1</li>
        <li>你班的</li>
        <li>你新你几班的</li>
        <li>你新技几班的</li>
        <li>几班的</li>
    </ul>
    <ul class="widget-default widget-body seleshow" id="seleshow3">
        <li>你新8班的</li>
        <li>你8几班的</li>
        <li>你6班的</li>
        <li>你6你几班的</li>
        <li>你新4的</li>
    </ul>


    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/mui/mui.js"></script>
    <script>
        $("#sele1").on("tap", function () {
            $("#seleshow2").hide()
            $("#seleshow3").hide()
            $("#sele2 span").removeClass("blue1");
            $("#sele3 span").removeClass("blue1");
            $("#sele2 fa").removeClass("rotat");
            $("#sele3 fa").removeClass("rotat");
            if ($("#seleshow1").is(":hidden")) {
                $("#seleshow1").show()
                $("#sele1 span").addClass("blue1");
                $("#sele1 .fa").addClass("rotat");
            } else {
                $("#seleshow1").hide()
                $("#sele1 span").removeClass("blue1");
                $("#sele1 .fa").removeClass("rotat");
            }
            $("#seleshow1 li").on("tap", function () {
                $(this).siblings("li").removeClass("selected");
                $("#seleshow1").hide()
                $(this).addClass("selected");
                $("#sele1 span").removeClass("blue1");
                $("#sele1 .fa").removeClass("rotat");
            })

        })

        $("#sele2").on("tap", function () {
            $("#seleshow1").hide()
            $("#seleshow3").hide()
            $("#sele1 span").removeClass("blue1");
            $("#sele3 span").removeClass("blue1");
            $("#sele1 fa").removeClass("rotat");
            $("#sele3 fa").removeClass("rotat");
            if ($("#seleshow2").is(":hidden")) {
                $("#seleshow2").show()
                $("#sele2 span").addClass("blue1");
                $("#sele2 .fa").addClass("rotat");
            } else {
                $("#seleshow2").hide()
                $("#sele2 span").removeClass("blue1");
                $("#sele2 .fa").removeClass("rotat");
            }
            $("#seleshow2 li").on("tap", function () {
                $(this).siblings("li").removeClass("selected");
                $("#seleshow2").hide()
                $(this).addClass("selected");
                $("#sele2 span").removeClass("blue1");
                $("#sele2 .fa").removeClass("rotat");
            })

        })

        $("#sele3").on("tap", function () {
            $("#seleshow1").hide()
            $("#seleshow2").hide()
            $("#sele1 span").removeClass("blue1");
            $("#sele2 span").removeClass("blue1");
            $("#sele1 fa").removeClass("rotat");
            $("#sele2 fa").removeClass("rotat");
            if ($("#seleshow3").is(":hidden")) {
                $("#seleshow3").show()
                $("#sele3 span").addClass("blue1");
                $("#sele3 .fa").addClass("rotat");
            } else {
                $("#seleshow3").hide()
                $("#sele3 span").removeClass("blue1");
                $("#sele3 .fa").removeClass("rotat");
            }
            $("#seleshow3 li").on("tap", function () {
                $(this).siblings("li").removeClass("selected");
                $("#seleshow3").hide()
                $(this).addClass("selected");
                $("#sele3 span").removeClass("blue1");
                $("#sele3 .fa").removeClass("rotat");
            })

        })
      


    </script>

</body>

</html>